<template>
  <div class="tabLis_child">
    <div v-for="item in datas" :key="item" class="tagConten">
      <div class="tagList" @click="tapShowChild(item)">
        <div class="tagList_l">
          {{ item.tag_name }}
        </div>
        <div class="tagList_r">
          {{ item.usable }}
          <i class="iconfont" :class="item.hide ? 'icon-icon_down1' : 'icon-icon_more1'" v-if="item.children && item.children.length > 0"></i>
        </div>
      </div>
      <div class="child" v-if="item.children && item.children.length > 0 && item.hide">
        <tapChild :datas="item.children" v-if="item.hide"></tapChild>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "tapChild",
  props: {
    datas: {
      type: null,
      default: null
    }
  },
  data() {
    return {
      info: []
    };
  },
  methods: {
    tapShowChild(item) {
      if (item.children && item.children.length > 0) {
        item.hide = !item.hide;
      }

      console.log(item);
      this.$forceUpdate();
    }
  }
};
</script>
<style lang="scss" scoped>
.tagConten {
  display: flex;
  flex-direction: column;
}
.tagList {
  padding: 0 0.75rem 1.56rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .tagList_l {
    font-size: 0.88rem;
    font-weight: 500;
    color: #00001c;
  }
  .tagList_r {
    font-size: 0.81rem;
    font-weight: 400;
    color: #6e6e79;
    .iconfont {
      font-size: 0.625rem;
    }
  }
}
.child {
  padding-left: 0.75rem;
}
</style>
